import { Layout, Tabs, Modal, Popover } from 'antd';

import 'antd/dist/reset.css';
import './App.css';

import CurveChart from './component/CurveChart'
import QueryPlanPanel from './component/QueryPlanPanel'
import QueryPanel from './component/QueryPanel'

const { Content, Sider } = Layout;

function App() {

  const items = [
    {
      label: '即时查询',
      key: 'JISHI',
      children: (<QueryPanel />),
    },
    {
      label: '计划查询',
      key: 'JIHUA',
      children: (<QueryPlanPanel />),
    }
  ]

  return (
    <Layout>
      <Sider className='curve-sider-wrapper' width={300}>
        <Tabs
          className='spd-tabs'
          size="small"
          centered
          items={items}
        />
      </Sider>
      <Content>
        <CurveChart />
      </Content>

      {/* Fix: 解决在QWebEngineView中Modal静态方法弹出框位置定位错误的问题 */}
      <Modal title="" open={false} />
      {/* Fix: 添加一个Popover，可以解决在QWebEngineView中Popover位置定位错误的问题 */}
      <Popover title="">
        <div />
      </Popover>
    </Layout>

    // <div className="App">
    //   <header className="App-header">
    //   </header>
    // </div>
  );
}

export default App;